<template>
  <view class="layout pageBg">
    <!-- 自定义导航栏 -->
    <customNavBar title="推荐" />
    <indexSkeleton v-if="isLoading" />
    <!-- 主体区域 -->
    <template v-else>
      <scroll-view
        enable-back-to-top
        refresher-enabled
        @refresherrefresh="onRefresherrefresh"
        :refresher-triggered="isTriggered"
        @scrolltolower="onScrolltolower"
        class="scroll-view"
      >
        <!-- 轮播图区域 -->
        <view class="banner">
          <swiper
            indicator-dots
            indicator-color="rgba(255,255,255,0.5)"
            indicator-active-color="#fff"
            autoplay
            circular
          >
            <swiper-item v-for="item in bannerList" :key="item._id">
              <navigator
                v-if="item.target == 'miniProgram'"
                :url="item.url"
                class="like"
                target="miniProgram"
                :app-id="item.appid"
              >
                <image :src="item.picurl" mode="aspectFill"></image>
              </navigator>

              <navigator
                v-else
                :url="`/pages/classList/classList?${item.url}`"
                class="like"
              >
                <image :src="item.picurl" mode="aspectFill"></image>
              </navigator>
            </swiper-item>
          </swiper>
        </view>
      </scroll-view>
      <!-- 中间通知区域 -->
      <view class="notice">
        <view class="left">
          <uni-icons type="sound-filled" size="20"></uni-icons>
          <text class="text">公告</text>
        </view>
        <view class="center">
          <swiper vertical autoplay interval="1500" duration="300" circular>
            <swiper-item v-for="item in noticeList" :key="item._id">
              <navigator open-type="reLaunch" url="/pages/news/index">
                {{ item.title }}
              </navigator>
            </swiper-item>
          </swiper>
        </view>
        <view class="right">
          <uni-icons type="right" size="16" color="#333"></uni-icons>
        </view>
      </view>
      <!-- 中间选择壁纸区域 -->
      <view class="select">
        <commonTitle>
          <!-- 上面的标题栏 -->
          <template #name>每日推荐</template>
          <template #custom>
            <view class="date">
              <uni-icons type="calendar" color="#74ddbe" size="18"></uni-icons>
              <view class="text">
                <uni-dateformat
                  :date="Date.now()"
                  format="dd日"
                ></uni-dateformat>
              </view>
            </view>
          </template>
        </commonTitle>

        <!-- 下面的壁纸图片栏 -->
        <view class="content">
          <scroll-view scroll-x>
            <view
              class="box"
              v-for="item in dayRandomList"
              :key="item._id"
              @click="goPreview(item._id)"
            >
              <image :src="item.smallPicurl" mode="aspectFill"></image>
            </view>
          </scroll-view>
        </view>
      </view>

      <view class="theme">
        <commonTitle>
          <template #name>专题精选</template>
          <template #custom>
            <navigator
              url="/pages/classify/index"
              open-type="reLaunch"
              class="more"
              >More+</navigator
            >
          </template>
        </commonTitle>

        <view class="content">
          <!-- 父传子 传数据 -->
          <themeItem
            v-for="item in classifyList"
            :key="item._id"
            :item="item"
          ></themeItem>
          <themeItem :isMore="true"></themeItem>
        </view>
      </view>
    </template>
  </view>
</template>

<script setup>
// 引入我们的组件
import commonTitle from "../../components/common_title/common_title.vue";
import themeItem from "../../components/theme_item/theme_item.vue";
// 引入我们的自定义导航栏组件
import customNavBar from "../../components/customNavBar/customNavBar.vue";
import { onLoad, onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
import { ref } from "vue";

// 引入我我们的骨架屏
import indexSkeleton from "./components/indexSkeleton.vue";

// 引入接口
import {
  bannerListAPI,
  getDayRandomAPI,
  getNoticeListAPI,
  getClassifyListAPI,
} from "../../apis/apis";

// 获取每日推荐图片数据
const dayRandomList = ref([]);
// 点击每日推荐下面的图片跳转到预览页面 priview
const goPreview = (id) => {
  uni.setStorageSync("storgClassList", dayRandomList.value);
  uni.navigateTo({
    url: "/pages/preview/index?id=" + id,
  });
};

// 获取我们的banner数据
const bannerList = ref([]);
const bannerListFn = async () => {
  const res = await bannerListAPI();
  // console.log(res);
  bannerList.value = res.data;
};

const dayRandomListFn = async () => {
  const res = await getDayRandomAPI();
  // console.log(res);
  dayRandomList.value = res.data;
};

// 壁纸通告数据
const noticeList = ref([]);
const noticeListFn = async () => {
  const res = await getNoticeListAPI({ select: true });
  noticeList.value = res.data;
};

// 获取分类数据
const classifyList = ref([]);
const classifyListFn = async () => {
  const res = await getClassifyListAPI({
    select: true,
  });
  classifyList.value = res.data;
};

//分享给好友
onShareAppMessage((e) => {
  return {
    title: "咸虾米壁纸，好看的手机壁纸",
    path: "/pages/classify/index",
  };
});

//分享朋友圈
onShareTimeline(() => {
  return {
    title: "咸虾米壁纸，好看的手机壁纸",
  };
});
// 统一初始化调用
const isLoading = ref(false);
onLoad(async () => {
  isLoading.value = true;
  await Promise.all([
    bannerListFn(),
    dayRandomListFn(),
    noticeListFn(),
    classifyListFn(),
  ]);
  isLoading.value = false;
});
const isTriggered = ref(false);
// 开启下拉刷新
const onRefresherrefresh = async () => {
  console.log("我被触发了");

  // 开始动画
  isTriggered.value = true;
  await Promise.all([
    bannerListFn(),
    dayRandomListFn(),
    noticeListFn(),
    classifyListFn(),
  ]);

  // 关闭动画
  isTriggered.value = false;
};

const onScroll = () => {
  console.log("我滚动了");
};
</script>

<style lang="scss" scoped>
.layout {
  .banner {
    width: 750rpx;
    padding: 30rpx 0rpx;
    swiper {
      width: 750rpx;
      height: 340rpx;
      &-item {
        width: 100%;
        height: 100%;
        padding: 0rpx 30rpx;
        .like {
          width: 100%;
          height: 100%;
          image {
            width: 100%;
            height: 100%;
            border-radius: 10rpx;
          }
        }
      }
    }
  }

  .notice {
    display: flex;
    width: 690rpx;
    height: 80rpx;
    line-height: 80rpx;
    background: #f9f9f9;
    margin: 0 auto;
    border-radius: 80rpx;

    .left {
      width: 140rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      :deep() {
        .uni-icons {
          color: $brand-theme-color !important;
        }
      }
      .text {
        color: $brand-theme-color;
        font-weight: 600;
        font-size: 28rpx;
      }
    }
    .center {
      flex: 1;
      swiper {
        height: 100%;
        &-item {
          height: 100%;
          font-size: 25rpx;
          color: #666;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
    .right {
      width: 70rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .select {
    padding-top: 50rpx;
    .date {
      color: $brand-theme-color;
      display: flex;
      align-items: center;
      .text {
        margin-left: 5rpx;
      }
    }
    .content {
      width: 720rpx;
      margin-left: 30rpx;
      margin-top: 30rpx;
      scroll-view {
        white-space: nowrap;
        flex: 1;
        overflow: hidden;
        .box {
          width: 200rpx;
          height: 430rpx;
          display: inline-block;
          margin-right: 15rpx;
          image {
            width: 100%;
            height: 100%;
            border-radius: 10rpx;
          }
        }
        .box:last-child {
          margin-right: 30rpx;
        }
      }
    }
  }

  .theme {
    padding: 50rpx 0;
    .more {
      font-size: 32rpx;
      color: #888;
    }
    .content {
      margin-top: 30rpx;
      padding: 0 30rpx;
      display: grid;
      gap: 15rpx;
      grid-template-columns: repeat(3, 1fr);
    }
  }
}
</style>
